<template>
    <section>
        <div class="mui-content">
            <!-- 商品轮播图 轮播图只接受图片链接item.imgUrl 和 href链接item.url-->
            <div class="mui-card">
                <div class="mui-card-content">
                    <div class="mui-card-content-inner">
                        <swiper :fullWidth="false" :list="goodsInfoImg"></swiper>
                    </div>
                </div>
            </div>


            <div class="mui-card">
                <div class="mui-card-header">{{goodsInfo.name}}</div>
                <div class="mui-card-content">
                    <div class="mui-card-content-inner">
                        <p class="price">
                            <span class="now-cost">￥{{goodsInfo.cost}}</span>
                            <del class="old-cost">￥{{goodsInfo.oldCost}}</del>
                        </p>
                        <p class="number-box">
                            <span>购买数量：</span>
                            <numbox @getcount="getSelectCount" :max="goodsInfo.remainder"></numbox>
                            <span>剩余库存:</span><span>{{ goodsInfo.remainder }}</span>
                        </p>
                        <p class="but-content">
                            <button class="btn primary middle">立即购买</button>
                            <button class="btn danger middle" @click.stop="addInCard">加入购物车</button>
                        </p>
                    </div>
                </div>
            </div>

            <div class=" mui-card">
                <div class="mui-card-header">商品参数</div>
                <div class="mui-card-content">
                    <div class="mui-card-content-inner">
                        <div class="goods-info">
                            <p><span>商品编号：</span><span>{{goodsInfo.id}}</span></p>
                            <p><span>商品描述：</span><span>{{goodsInfo.described}}</span></p>
                        </div>
                        <p></p>
                    </div>
                </div>
            </div>
        </div>

        <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
            <div class="ball" v-show="showBall" :style="'top:' +ball.ballTop +';left:' +ball.ballLeft"></div>
        </transition>
    </section>
</template>

<script>
    import swiper from '../subcomponents/swiper.vue';
    import numbox from '../subcomponents/goodsinfo_numbox.vue';
    import { Toast } from 'mint-ui';
    import cookie from '../../util/cookie.js';

    export default {
        data() {
            return {
                goodsInfo: {
                    name: '',
                    imgUrls: [],
                    oldCost: 0,
                    cost: 0,
                    remainder: 0,
                    id: 0,
                    described: ''
                },
                goodsInfoImg: [],
                ball: {
                    ballTop: 0,
                    ballLeft: 0
                },
                showBall: false,
                selectCount: 1,
                ballTimer: null,
                ballCoolDownTime: 0
            }
        },
        created() {
            // var id = ;
            this.getGoodsInfo(1);
        },
        methods: {
            getGoodsInfo(id) {
                //    this.$http.get('/goodsinfo/' +id)
                this.$http.get('/goodsinfo/10001').then(data => {
                    this.goodsInfo = data.body;

                    this.goodsInfoImg = this.goodsInfo.imgUrls;
                }).catch({

                });
            },
            addInCard(e) {

                var token = cookie.getCookie('token');
                if (token != '' && token != null && token != 'undefined') {
                    if (this.ballCoolDownTime === 0) {
                        console.log(this.ballCoolDownTime);
                        this.addInCardAnimate(e);
                        var goodsinfoOfCar = {
                            id: this.goodsInfo.id,
                            name: this.name,
                            count: this.selectCount,
                            singleCost: this.goodsInfo.cost,
                            selected: true,
                            imgUrl: this.goodsInfo.imgUrls[0].imgUrl
                        }
                        this.$store.commit('addToCar', goodsinfoOfCar);

                        this.ballCoolDownTime = 1;
                        // 添加冷却时间，解决小球动画BUG
                        this.ballTimer = setInterval(this.calculateBallCoolDownTime, 1000);
                    }

                    
                } else {
                    Toast('你还没登录，请先去登录');

                }

            },
            // 添加冷却时间，解决小球动画BUG
            calculateBallCoolDownTime() {
                this.ballCoolDownTime++;
                if (this.ballCoolDownTime >= 3) {                    
                    this.ballCoolDownTime = 0;
                    clearInterval(this.ballTimer);
                }
            }
            ,
            addInCardAnimate(e) {
                this.ball.ballTop = e.clientY + 'px';
                this.ball.ballLeft = e.clientX + 'px';
                this.showBall = !this.showBall;

                Toast('已添加' + this.selectCount + '个商品到购物车');
            },
            beforeEnter(el) {

            },
            enter(el, done) {
                const badge = document.getElementById('badge').getBoundingClientRect();
                this.ball.ballTop = badge.top + 'px';
                this.ball.ballLeft = badge.left + 'px';
                done();
            },
            afterEnter(el) {
                this.showBall = !this.showBall;
            },
            getSelectCount(count) {
                this.selectCount = count;
            }

        },
        components: {
            swiper,
            numbox
        }
    }
</script>


<style lang="scss" scoped>
    section {
        margin-bottom: 60px;
    }

    .price {
        display: flex;

        .old-cost {
            font-size: 14px;
            margin-left: 10px;
        }

        .now-cost {
            color: #ff0000;
            font-size: 20px;
        }
    }

    .number-box {
        font-size: 15px;
    }

    .but-content {
        display: flex;

        .btn {
            border-radius: 4px;
            margin: auto 10px;
            transition: 0s;
        }

        .primary {
            background: #0066ff;
            color: #ffffff;
        }

        .primary:active {
            background: #0400ff;
        }

        .danger {
            background: #f30606;
            color: #ffffff;
        }

        .danger:active {
            background: #c50606;
        }

        .middle {
            padding: 10px;
            font-size: 18px;
        }
    }

    .goods-info>p {
        font-size: 18px;
    }

    .ball {
        position: fixed;
        width: 15px;
        height: 15px;
        z-index: 99;
        background: #f30606;
        border-radius: 50%;
        transition: all 0.6s cubic-bezier(.55, -0.49, 1, .25);
    }
</style>